<template lang="html">
  <div style="padding-right: 20px;">
    <span class="custom-tree-node" style="margin-left: 70px; height: 30px; font: 14px bold;">
      <span>指派名单</span>
      <span>值勤区域</span>
      <span>角色</span>
    </span>
    <el-scrollbar style="height: 550px;">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        size="mini"
        clearable
      />
      <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        :default-expand-all="true"
        node-key="uid"
        highlight-current
        :props="defaultProps"
        :filter-node-method="filterNode"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{node.label}}</span>
          <span>{{data.dutyAreaName}}</span>
          <span>{{ data.tmptAuthPosition|getJsonName }}</span>
        </span>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
    import {listCmpyDutyArea} from './api'

    export default {
        name: 'AssigneeTree',
        components: {},
        data () {
           return{
                defaultProps: {
                 children: 'children',
                 label: 'name' // 请换成对应展示属性 **************
                },
                data:[],
                checkedData: [],
                filterText: undefined,
           }
        },
        computed: {
            /*'assignedTimes': function() {
                return this.data.assignedTimes +'/' +data.assignedFinishedTimes
            }*/
        },
        watch: {
          filterText(val) {
            this.$refs.tree.filter(val)
          }
        },
        methods: {
            initData(userId) {
                listCmpyDutyArea({userId:userId, queryType:11}).then((result) => {
                    if (result.success) {
                        this.data = result.list
                        this.data.forEach(cmpy=>{
                            if (cmpy.beUser) {
                              cmpy.uid = 'u_'+cmpy.id
                            }else {
                              cmpy.uid = 'c_' + cmpy.id
                            }
                            if(cmpy.children)cmpy.children.forEach(area => {
                                if (area.beUser) {
                                  area.uid = 'u_'+area.id
                                }else {
                                  area.uid = 'd_'+area.id
                                }
                                if(area.children)area.children.forEach(user => {
                                    user.uid = 'u_'+user.id
                                })
                            })
                        })
                    }
                })
            },
            filterNode(value, data) {
              if (!value) return true
              const propValue = ''+data.name
              return propValue.indexOf(value) !== -1
            },
            handleAssignTask() {
                // ['id':1, 'name':'cityManager', 'children':[{'id':2, 'name':'jackson'}]]
                this.checkedData = []
                const cmpyList = []
                const userList = []

                // 把选择的机构，和用户，单独取出来
                const nodesChecked = this.$refs.tree.getCheckedNodes()
                const nodesHalf = this.$refs.tree.getHalfCheckedNodes()
                const nodes = nodesChecked.concat(nodesHalf)

                nodes.forEach(node => {
                    const id = node.id
                    const name = node.name
                    const uid = node.uid;
                    // 是机构
                    if (uid.indexOf('c_')===0) {
                        cmpyList.push({'id':id, 'name':name})
                    }
                    // 是队员
                    if (uid.indexOf('u_')===0) {
                        userList.push({'id':id, 'name':name})
                    }
                })

                // 计算选择的树结构; 复杂的多层树转成 机构-员工两层，目的是，工作流中是 机构任务-工单 结构
                this.data.forEach(cmpy=>{
                    if (this.contain(cmpyList, cmpy.id)) {
                        const cmpyNew = {'id':cmpy.id, 'name':cmpy.name, children: []}
                        this.checkedData.push(cmpyNew)
                        if(cmpy.children)cmpy.children.forEach(area => {
                            if (area.beUser && this.contain(userList, area.id)) {
                                cmpyNew.children.push({'id':area.id, 'name':area.name})
                            }
                            if(area.children)area.children.forEach(user => {
                                if (this.contain(userList, user.id)) {
                                    cmpyNew.children.push({'id':user.id, 'name':user.name})
                                }
                            })
                        })
                    }
                })

                if (userList.length === 0) {
                    this.notify({'success':false, 'content':'请选择值勤人员'});
                    return
                }

                this.$emit("handleAssignTaskCallback", this.checkedData)
            },

            // 判断list中是否包含id
            // list = [{'id':id, 'name':name},{'id':id, 'name':name}]
            contain(list, id) {
                let flag = false
                list.forEach(item => {
                    if (item.id === id) {
                      flag = true
                    }
                })
                return flag
            },


        }
    }
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .custom-tree-node span {
    width: 100%;
    /*border: 1px solid #fff;*/
  }

</style>
